<template>
  <div class="tree">
    <el-input v-model="filterText" placeholder="输入关键字进行过滤" />
    <v-tree ref="tree" :data="treeData" :tpl="tpl" radio :scoped="true" @node-click="()=>{}" @node-select="handleSelect" />
  </div>
</template>
<script type="text/jsx">
export default {
  components: {},
  props: {
    treeData: {
      type: Array,
      require: true,
      default() {
        return null
      }
    }
  },
  data() {
    return {
      filterText: '',
      td: []
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.searchNodes(val)
    }
  },
  methods: {
    tpl(...args) {
      const { 0: node, 2: parent, 3: index } = args
      let titleClass = node.selected ? 'node-title node-selected' : 'node-title'
      const selectButtonClass = node.selected ? 'icon-button-group selected' : 'icon-button-group'
      let iconClass = 'el-icon-folder'
      if (node.type === 2) {
        iconClass = 'el-icon-folder'
      } else if (node.type === 0) {
        iconClass = 'el-icon-document'
      } else if (node.type === 1) {
        iconClass = 'el-icon-paperclip'
      }
      if (node.searched) {
        titleClass += ' node-searched'
      }
      if (!node.enabled) {
        titleClass += ' node-disabled'
      }
      return <span class='tree-node-wrap'>
        <i class={iconClass} style='font-size: 16px;'></i>
        <span class={titleClass} domPropsInnerHTML={node.title} onClick={() => { this.$refs.tree.nodeSelected(node) }} />
        <span class={selectButtonClass}>
          <i onClick={() => { this.handleEdit(node) }} class='el-icon-edit icon-button'> </i>
          <i onClick={() => { this.handleAdd(node) }} class='el-icon-plus icon-button'> </i>
          <i onClick={() => { this.handleDelete(node) }} class='el-icon-delete icon-button'> </i>
        </span>
      </span>
    },

    handleSelect(args) {
      this.$emit('node-select', args)
    },

    handleAdd(args) {
      if (!args.selected) {
        this.$refs.tree.nodeSelected(args)
      }
      this.$emit('node-add', args)
    },

    handleEdit(args) {
      if (!args.selected) {
        this.$refs.tree.nodeSelected(args)
      }
      this.$emit('node-edit', args)
    },

    handleDelete(args) {
      this.$emit('node-delete', args)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

  .tree-node-wrap {
    display: inline-flex;
    line-height: 15px;
    align-items: center;
  }
  .tree-node-wrap:hover .icon-button-group{
    display: inline-block!important;
  }

  .icon-button-group {
    display: none;
    margin-left: 20px;

    &.selected {
      display: inline-block!important;
    }
  }
  .el-icon-delete{
    color: #F56C6C;
  }
  .el-icon-edit{
    color: #409EFF;
  }
  .node-disabled {
    color: #909399;
  }
  .icon-button {
    margin-right: 10px;
    font-size: 16px;
    &:hover {
      background: #99a9bf;
    }
    &:last-child {
      margin-right: 0px;
    }
    cursor: pointer;
  }
  
  ::v-deep .el-input__inner:hover{
	  border-color: $btnBgc;
  }
  ::v-deep .el-input__inner:focus{
	  border-color: $btnBgc;
  }
</style>
